<page-header title="新增事件" [breadcrumb]="breadcrumb" [action]="action" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>事件管理</ql-breadcrumb-item>
            <ql-breadcrumb-item>新增事件</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #action>
        <ql-button type="primary" (click)="onSubmit()">提交</ql-button>
    </ng-template>
</page-header>
<page-container>
    <ql-card header="新增事件">
        <ql-form label-width="120px" ql-row>
            <ql-form-item ql-col span="12" label="事件类别:">
                <ql-select placeholder="请选择">
                    <ql-option *ngFor="let item of eventType" [label]="item.value" [value]="item.key">
                    </ql-option>
                </ql-select>
            </ql-form-item>
            <ql-form-item ql-col span="12" label="事件名称:">
                <ql-input></ql-input>
            </ql-form-item>

            <ql-form-item ql-col span="12" label="统计开始时间:">
                <ql-date-picker></ql-date-picker>
            </ql-form-item>
            <ql-form-item ql-col span="12" label="统计结束时间:">
                <ql-date-picker></ql-date-picker>
            </ql-form-item>
            <div ql-col>
                <div ql-row>
                    <ql-form-item ql-col span="6" label="用户行为:">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
            </div>
            <div ql-col>
                <div ql-row>
                    <ql-form-item ql-col label="触发条件:">
                        <ql-input class="ql-padding-right" ql-col span="6"></ql-input>
                        <ql-input class="ql-padding-right" ql-col span="6"></ql-input>
                    </ql-form-item>
                </div>
            </div>
            <div ql-col>
                <div ql-row>
                    <ql-form-item ql-col label="触发渠道:">
                        <ql-button type="primary" (click)="triggerChannels.push({ channelUrl: ''})" size="small">新增渠道</ql-button>
                        <ng-container *ngFor="let item of triggerChannels; let i = index">
                            <div ql-row>
                                <ql-form-item ql-col span="8" label="页面地址{{i+1}}:">
                                    <ql-input [model]="item.channelUrl"></ql-input>
                                </ql-form-item>
                                <div ql-col span="1" class="text-center">
                                    <ql-button (click)="triggerChannels.splice(i, 1)" type="text" *ngIf="i > 0">X</ql-button>
                                </div>
                            </div>
                        </ng-container>
                    </ql-form-item>
                </div>
            </div>

            <div ql-col>
                <div ql-row>
                    <ql-form-item ql-col label="金额:">
                        <ql-input class="ql-padding-right" ql-col span="6"></ql-input>
                        <ql-input class="ql-padding-right" ql-col span="6"></ql-input>
                    </ql-form-item>
                </div>
            </div>
            <div ql-col>
                <div ql-row>
                    <ql-form-item ql-col label="客户标签属性:">
                        <ql-button type="primary" (click)="tagAttribute.push({ tag: ''})" size="small">新增标签属性</ql-button>
                        <ng-container *ngFor="let item of tagAttribute; let i = index">
                            <div ql-row>
                                <ql-form-item ql-col span="8" label="客户标签属性{{i+1}}:">
                                    <ql-input [model]="item.tag"></ql-input>
                                </ql-form-item>
                                <div ql-col span="1" class="text-center">
                                    <ql-button (click)="tagAttribute.splice(i, 1)" type="text" *ngIf="i > 0">X</ql-button>
                                </div>
                            </div>
                        </ng-container>
                    </ql-form-item>
                </div>
            </div>
            <ql-form-item ql-col span="12" label="区域设置:">
                <ql-select placeholder="请选择">
                    <ql-option *ngFor="let item of tradeArea" [label]="item.value" [value]="item.key">
                    </ql-option>
                </ql-select>
            </ql-form-item>
        </ql-form>
    </ql-card>
</page-container>